<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.Bubble</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.bubble.js"></script>
<script type="text/javascript">
	$(function(){
		var stopOnRow = false;//set to true if you want to stop the bubbling once it gets to the tr
		var stopOnTable = false;//set to true to stop the bubbling once it gets to the table
		$('table').bind('rowclicked',function(event){
			$('table').removeClass('focused');
			$(this).addClass('focused');
			event.tableID = this.id;
			return !stopOnTable;// or if(stopOnTable) event.stopPropagation();
		});
		$('tr')
			.click(function( event ){
				$(this).bubble('rowclicked');
				event.stopPropagation();
			})
			.bind('rowclicked',function(event){
				$('tr').removeClass('selected');
				$(this).addClass('selected');
				event.rowID = this.id;
				return !stopOnRow;// or if(stopOnRow) event.stopPropagation();
			});
		$('#container').bind('rowclicked',function( event ){
			$(this).find('h3').text( 'row "'+event.rowID+'" clicked, from table "'+event.tableID+'"' );
		});
	});
</script>
<style type="text/css">
	body{
		background-color:white;
		color:black;
		font-weight:bolder;
		margin:30px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	a{
		color:black;
	}
	.focused{
		width:300px;
		height:150px;
		border:#009900 thick solid;
		background-color:#009900;
		color:white;
	}
		.focused tr{
			background-color:red;
		}
		tr.selected{
			background-color:#99CC33;
			color:black;
		}
	#container{
		padding-left:10px;
	}
		#container span{
			margin-left: 30px;
			border:1px grey solid;
		}
	table{
		float:left;
		margin:10px;
		cursor:pointer;
		width:200px;
		text-align:center;
		background-color:#666666;
	}
	div.clear{
		clear:left;
	}
	div.download{
		margin-top:20px;
		border:1px white solid;
		width:200px;
	}
</style>
</head>
<body>
	<h1>jQuery.Bubble</h1>
	<div id="container">
		<h3>A summary will appear here, unless you stop the bubbling</h3>
		<table id="table1" border="1">
			<tr id="row1">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row2">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row3">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row4">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</table>
		
		<table id="table2" border="1">
			<tr id="row5">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row6">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row7">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row8">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</table>
		
		<table id="table3" border="1">
			<tr id="row9">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row10">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row11">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row12">
				<td>Cell</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</table>		
		<div class="clear" />
	</div>
	<input type="text" value="$('tr:eq(3)').bubble('rowclicked')" style="margin-top:30px" size="80" /><input type="button" value="execute" onClick="eval(this.previousSibling.value)" />
	<div class="download">
		Links
		<ul>
			<li><a href="http://flesler.blogspot.com/2007/10/jquerybubble.html">Blog entry</a></li>
			<li><a href="http://jquery.com/plugins/project/Bubble">Project Page</a></li>
		</ul>
	</div>
</body>
</html>
